<template>
    <div class="content">
        <Form :label-width="200" :show-message="false" :model="tform" :rules="rules" ref="tform">
            <FormItem label="试卷名称" prop="paperName">
                <Input
                    v-model="tform.paperName"
                    :maxlength="20"
                    placeholder="校内唯一，1到20位"
                    style="width: 300px"
                />
            </FormItem>
            <FormItem label="答题时长" prop="totalTime">
                <Input
                    v-model="tform.totalTime"
                    type="number"
                    placeholder="校内唯一，1到20位"
                    style="width: 300px"
                />
                <span>分钟</span>
            </FormItem>
            <FormItem label="来源">
                <Select
                    style="width: 300px;"
                    placeholder="来源"
                    v-model="tform.sortId"
                    clearable
                    multiple
                    @on-change="changeSort"
                >
                    <Option

                        v-for="(item) in list"
                        :key="item.sortId"
                        :value="item.sortId"
                    >{{item.sort}}</Option>
                </Select>
            </FormItem>

            <!--<Form  :model="tform" ref="tform">-->
            <Table :columns="columns" :data="tform.paperDetailVo">
                <template slot-scope="{row}" slot="type">
                    {{questionType[row.type]}}

                </template>
                <template slot-scope="{ row,index }" slot="num">

                    <FormItem
                        class="ml-0"
                        label=""
                        :prop="'paperDetailVo.'+index+'.num'"
                        :rules="{required: true,type:'number',max:questionSl(row.type), message: '', trigger: 'change,blur'}"
                    >
                        <inputNumber :max="questionSl(row.type)" :min="0" type="text" v-model="tform.paperDetailVo[index].num" placeholder=""/>
                        (可选{{questionSl(row.type)}})
                    </FormItem>

                </template>
                <template slot-scope="{ row,index }" slot="score">
                    <FormItem
                        class="ml-0"
                        label=""
                        :prop="'paperDetailVo.'+index+'.score'"
                        :rules="{required: true,type:'number',min:0, message: '不能为空', trigger: 'change,blur'}"
                    >
                        <inputNumber type="text" v-model="tform.paperDetailVo[index].score" placeholder=""/>
                    </FormItem>
                </template>
                <template slot-scope="{ row,index }" slot="total">
                    {{tform.paperDetailVo[index].num*tform.paperDetailVo[index].score}}
                </template>
            </Table>
            <!--</Form>-->
            <Row style="margin-top:15px;">
                <Col span="3">
                设置各难度系数题目占比
                </Col>
                <Col span="7">
                <FormItem
                    label="简单"
                    prop="easy"
                    :rules="{required: true,type:'number',min:0, message: '不能为空', trigger: 'change,blur'}"
                >
                    <inputNumber
                        v-model="tform.easy"
                        type="number"
                        placeholder=""
                        style="width: 80px"
                    />
                    <span>%</span>
                </FormItem>
                </Col>
                <Col span="7">
                <FormItem
                    label="一般"
                    prop="middle"
                    :rules="{required: true,type:'number',min:0, message: '不能为空', trigger: 'change,blur'}"
                >
                    <inputNumber
                        v-model="tform.middle"
                        type="number"
                        placeholder=""
                        style="width: 80px"
                    />
                    <span>%</span>
                </FormItem>
                </Col>
                <Col span="7">
                <FormItem
                    label="困难"
                    prop="difficult"
                    :rules="{required: true,type:'number',min:0, message: '不能为空', trigger: 'change,blur'}"
                >
                    <inputNumber
                        v-model="tform.difficult"
                        type="number"
                        placeholder=""
                        style="width: 80px"
                    />
                    <span>%</span>
                </FormItem>
                </Col>
            </Row>
            <div>

            </div>

        </Form>

        <div class="submit-footer">
            <Button type="primary" @click="sumbit">下一步</Button>
            <Button>取消</Button>
        </div>
    </div>
</template>
<script>
import { questionType } from '@/libs/enums'
import FormMamual from './components/form-mamual'
import { smartPaper, paperSort } from '@/api/paper'
import { getSort } from '@/api/questionManage'
export default {
    components: {
        // eslint-disable-next-line vue/no-unused-components
        FormMamual
    },
    inject: ['nextPageReload'],
    data () {
        return {
            slJson: {},
            questionType: questionType,
            list: [],
            params: {
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            schoolList: [],
            columns: [
                {
                    title: '题型',
                    slot: 'type',
                    align: 'center'
                }, {
                    title: '题量',
                    slot: 'num',
                    align: 'center'
                }, {
                    title: '分数',
                    slot: 'score',
                    align: 'center'
                }, {
                    title: '合计',
                    slot: 'total',
                    align: 'center'
                }
            ],
            tform: {
                paperName: '',
                totalTime: '',
                paperDetailVo: [
                    { type: '1', num: 0, score: 0 },
                    { type: '2', num: 0, score: 0 },
                    { type: '3', num: 0, score: 0 },
                    { type: '4', num: 0, score: 0 },
                    { type: '5', num: 0, score: 0 },
                    { type: '6', num: 0, score: 0 },
                    { type: '7', num: 0, score: 0 }
                ],
                easy: null,
                middle: null,
                difficult: null,
                sortId: []
            },
            form: {
                field1: ''
            },
            rules: {
                paperName: [
                    { required: true, message: '试卷名称必填', trigger: 'blur' },
                    { min: 1, max: 20, message: '本院校内唯一，20个字以内', trigger: 'blur,change' }
                ],
                totalTime: [
                    { required: true, message: '答题时长必填', trigger: 'blur,change' }
                ]
            }
        }
    },
    methods: {
        questionSl (type) {
            let obj = {
                1: this.slJson.singleChoiceNum,
                2: this.slJson.multipleChoiceNum,
                3: this.slJson.blankNum,
                4: this.slJson.judgeNum,
                5: this.slJson.shortAnswerNum,
                6: this.slJson.calculateNum,
                7: this.slJson.analysisNum
            }
            return obj[type]
        },
        changeSort () {
            this.getPaperSort()
        },
        getPaperSort () {
            let params = {
                sortId: this.tform.sortId.join(',')
            }
            paperSort(params).then(res => {
                this.slJson = res.data.data
            })
        },
        queryList () {
            let params = {
                pageNum: this.params.pageNum,
                pageSize: this.params.pageSize,
                schoolId: '',
                sequence: '',
                sort: '',
                sortId: ''
            }
            getSort(params).then(res => {
                console.log(res)
                this.list = res.data.data.list
                this.params.pageNum = res.data.data.pageNum
                this.params.pageSize = res.data.data.pageSize
                this.params.total = res.data.data.total
            })
        },
        sumbit () {
            this.$refs['tform'].validate(valid => {
                if (valid) {
                    // let params = this.tform;
                    let arr = []
                    this.tform.paperDetailVo.map(item => {
                        if (item.num != 0 && item.score != 0) {
                            arr.push(item)
                        }
                    })
                    let params = {}
                    params.difficult = this.tform.difficult
                    params.easy = this.tform.easy
                    params.middle = this.tform.middle
                    params.paperDetailVo = arr
                    params.paperName = this.tform.paperName
                    params.totalTime = this.tform.totalTime
                    params.sortId = this.tform.sortId.join(',')
                    smartPaper(params).then(res => {
                        if (res.data.code != '0000') {
                            this.$Message.error(res.data.msg)
                            return
                        }
                        this.$Message.success('增加成功')
                        this.$router.push({
                            name: 'testPaperList',
                            query: {
                            }
                        })
                        this.nextPageReload()
                    })
                }
            })
        }
    },
    mounted () {
        this.queryList()
        this.getPaperSort()
    }
}
</script>
<style lang="less" scoped>
.submit-footer {
    margin-top: 20px;
    padding-left: 10px;
}
.w80{
    width:80px;
}
</style>
<style>
.ml-0 .ivu-form-item-content{
    margin-left:0px !important;
}
</style>
